<template>
	<view class="debugSetting">
		<view class="uni-title uni-common-pl">选择连接方式：</view>
		<view class="uni-list">
			<radio-group @change="modeChange">
				<label class="uni-list-cell uni-list-cell-pd" v-for="(item, index) in modeItems" :key="item.value">
					<view>
						<radio :value="item.value" :checked="item.value == modeValue" />
					</view>
					<view>{{item.name}}</view>
				</label>
			</radio-group>
		</view>
		<view v-if="modeValue == 2" style="border-bottom:1px solid #c8c7cc;">
			<input class="uni-input" v-model="APIPathValue" placeholder="请输入调用API地址" />
		</view>
		<view v-if="modeValue == 2" style="border-bottom:1px solid #c8c7cc;">
			<input class="uni-input" v-model="resourcePathValue" placeholder="请输入资源路径地址" />
		</view>
		<view v-if="modeValue == 2" class="uni-title uni-common-pl">*留空不填写则为默认路径</view>
		<view class="uni-title uni-common-pl">vconsole模式：</view>
		<view class="uni-list">
			<view class="uni-list-cell uni-list-cell-pd">
				<view class="uni-list-cell-db">开启vconsole调试(仅H5)</view>
				<switch @change="vconsoleChange" :checked="vconsoleValue" />
			</view>
		</view>
		<view class="uni-padding-wrap uni-common-mt">
			<button type="primary" @tap="doReset">确认设置</button>
		</view>

	</view>
</template>

<script>
  import { mapState, mapMutations } from 'vuex';
	
	export default {
    name: 'debugSetting',
		data() {
			return {
				modeItems: [{
						name: '使用easy-mock假数据(需联网)',
						value: '1'
					},
					{
						name: '链接服务器路径',
						value: '2'
					}
				],
				modeValue: '0',
				APIPathValue: '',
        resourcePathValue: '',
        vconsoleValue: false
			}
		},
    computed: {
      ...mapState ([
        'debugSetting' // 将 this.debugSetting 映射为 this.$store.state.debugSetting
      ])
		},
		onLoad() {
      // 判断是否有存储过开发者选项的配置
			let {mode, APIPath, resourcePath, vconsole} = this.debugSetting;
			this.modeValue = mode ? mode : '2';
			if(this.modeValue == '2') {
				this.APIPathValue = APIPath ? APIPath : '';
				this.resourcePathValue = resourcePath ? resourcePath : '';
			}
			this.vconsoleValue = vconsole ? vconsole : false;
		},
		methods: {
      ...mapMutations ([ 
        'updateDebugSetting' // 将 this.updateDebugSetting(value) 映射为 this.$store.commit('updateDebugSetting', value)
      ]),
			modeChange(e) {
				this.modeValue = e.target.value;
			},
			vconsoleChange(e) {
				this.vconsoleValue = e.target.value;
			}, 
      doReset() {
				this.updateDebugSetting({
					mode: this.modeValue,
					APIPath: this.modeValue == '1' ? '' : this.APIPathValue,
					resourcePath: this.modeValue == '1' ? '' : this.resourcePathValue,
					vconsole: this.vconsoleValue
				});
        this.$UIplugins.message({
          message: '切换设置成功',
          closeCallback() {}
        });
      }
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #F4F5F6;
		height: 100%;
		font-size: 28upx;
		line-height: 1.8;
		.debugSetting {
			display: flex;
			flex-direction: column;
			justify-content: center;
		}
	}
</style>
